<template>
    <div style="padding-bottom: 30px">
        <Row class="menu-header">
            <Col span="5" style="text-align: left;">
                <img class="index-icon" src="../../assets/index/i-icon9.png">
                <span class="index-title"><strong>友情链接</strong></span>
                <span class="index-desc">/ Links</span>
            </Col>
            
        </Row>
        <Row class="index-link" type="flex" >
            <Col span="4" v-for="i in links" :key="i.id" :style="{paddingTop: i.id > 7 ? '0' : '2%'}">
                <div style="width: 100%"  class="index-links">
                    <img :src="i.pic" style="width: 160px">
                </div>

            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        name: "links",
        data() {
            return {
                links: [
                    {
                        id: 1, pic: require("../../assets/links/link-icon1.png"), link: "www.baidu.com"
                    },
                    {
                        id: 2, pic: require("../../assets/links/link-icon2.png"), link: "www.baidu.com"
                    },
                    {
                        id: 3, pic: require("../../assets/links/link-icon3.png"), link: "www.baidu.com"
                    },
                    {
                        id: 4, pic: require("../../assets/links/link-icon4.png"), link: "www.baidu.com"
                    },
                    {
                        id: 5, pic: require("../../assets/links/link-icon5.png"), link: "www.baidu.com"
                    },
                    {
                        id: 6, pic: require("../../assets/links/link-icon6.png"), link: "www.baidu.com"
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .index-link{
        background-color: white;
        padding: 60px 20px;
    }
    .index-links{
        cursor: pointer;
    }
</style>